<template>
    <div class="personal" style="margin: 20px;">
        <el-row>
            <el-col :span="24">
                <el-card class="box-card" style="">
                    <div style="padding: 10px; border-bottom: 1px solid #ccc; display: flex">
                        <div style="flex: 1;font-size: 18px">个人信息</div>
                        <div v-show="tbxs">
                            <i class="el-icon-star-on"
                                style="font-size: 28px;float: right;position: absolute;right: 26px;cursor: pointer;"
                                @click="star()" v-show="!isuserstar"></i>
                            <i class="el-icon-star-on"
                                style="font-size: 28px;float: right;position: absolute;right: 26px;cursor: pointer;color: orange;"
                                @click="nostar()" v-show="isuserstar"></i>
                        </div>

                        <div style="flex: 1; text-align: right">
                            <el-button @click="edit()" v-show="isloginuser">修改</el-button>
                        </div>
                    </div>

                    <div style="display: flex;padding: 20px;gap: 20px;">
                        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                            style=" width: 260px;height: 260px;text-align: center;line-height: 260px;margin-top: 20px;flex:20%">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                        <!-- 用户信息 -->
                        <div class="userinfo"
                            style="display: flex;flex-direction: column;font-family: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif';font-size: 14px;gap: 12px;padding: 20px;flex: 20%;">
                            <!-- <span>用户名：</span><span>{{user.username}}</span>
                        <span>性别：</span><span>{{user.gender}}</span>
                        <span>学号：</span><span>{{user.studentId}}</span>
                        <span>年龄：</span><span>{{user.age}}</span>
                        <span>邮箱：</span><span>{{user.email}}</span>
                        <span>手机：</span><span>{{user.phone}}</span>
                        <span>个性签名：</span><span>{{user.signature}}</span>
                        <span>学校名称：</span><span>{{user.school}}</span> -->
                            <div>用户名：<span>{{ user.username }}</span></div>
                            <div>性别：<span>{{ user.gender }}</span></div>
                            <div>学号：<span>{{ user.studentId }}</span></div>
                            <div>年龄：<span>{{ user.age }}</span></div>
                            <div>邮箱：<span>{{ user.email }}</span></div>
                            <div>手机：<span>{{ user.phone }}</span></div>
                            <div>个性签名：<span>{{ user.signature }}</span></div>
                            <div>学校名称：<span>{{ user.school }}</span></div>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="生活分享" name="shfx" style=" display: flex;gap:20px">
                            <!-- 帖子列表 -->
                            <div class="lifesharinglist" style="display: flex;gap:20px">
                                <div class="lifesharing" v-for="item in lifesharings">
                                    <el-link @click="toDetail(item.id, item.type, item.author)"> {{ item.name
                                        }}</el-link>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="学习交流" name="xxjl">
                            <div class="learningexchangelist" style=" display: flex;gap:20px">
                                <div class="learningexchange" v-for="item in learningexchanges">
                                    <el-link @click="toDetail(item.id, item.type, item.author)"> {{ item.name
                                        }}</el-link>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>

            </el-col>
        </el-row>
        <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <el-form :model="entity">
                <el-form-item label="用户名" label-width="100px">
                    <el-input v-model="entity.username" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="100px">
                    <el-input v-model="entity.gender" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="100px">
                    <el-input-number v-model="entity.age" @change="handleChange" :min="1" :max="100"></el-input-number>
                </el-form-item>
                <el-form-item label="手机号" label-width="100px">
                    <el-input v-model="entity.phone" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="100px">
                    <el-input v-model="entity.email" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="个性签名" label-width="100px">
                    <el-input v-model="entity.signature" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="学校名称" label-width="100px">
                    <el-input v-model="entity.school" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="100px">
                    <el-input show-password v-model="entity.password" autocomplete="off" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="exit">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>


<script>
// 导入api
import API from "@/api/request";

export default {
    inject: ['reload'],
    data() {
        return {
            uploadUrl: 'http://localhost:9001/api/file/upload',
            imageUrl: '',
            user: {},
            userbase: {},
            //获取
            entity: {},
            dialogFormVisible: false,
            activeName: 'shfx',
            lifesharings: [],
            learningexchanges: [],
            userid: '',
            isuserstar: false,
            tbxs: false,
            isloginuser: false
        }
    },
    methods: {
        suggestion() {
            API.post("api/suggestion/suggestion", {
                "title": this.suggestionForm.title,
                "code": this.suggestionForm.code,
                "userName": this.user.username,
                "content": this.suggestionForm.desc
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: '提交建议成功！',
                        type: 'success'
                    });
                }
            }).catch(error => {
                console.log(error);
                this.$message({
                    message: '提交建议失败！',
                    type: 'error'
                });
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res);
            console.log(file)
            if (res.code === 200) {
                console.log("成功")
                this.entity.headSculpture = res.data;
                //更新数据库
                this.save();
            }
            // 刷新页面
            this.reload();
        },
        beforeAvatarUpload(file) {
            const isImage = file.type.startsWith('image/');  // 检查文件类型是否是图片
            const isLt2M = file.size / 1024 / 1024 < 2;      // 检查文件大小是否小于 2MB

            if (!isImage) {
                this.$message.error('上传头像图片只能是图片格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isImage && isLt2M;
        },
        getByStudentId() {
            API.get("/api/user/getByStudentId", {
                params: {
                    "studentId": this.user.studentId
                }
            }).then(res => {
                console.log("结果")
                console.log(res)
                if (res.data.code === 200) {
                    this.entity = res.data.data;
                    console.log(this.entity)
                }
            })
        },

        edit() {
            this.dialogFormVisible = true;
            this.getByStudentId();
        },
        save() {
            console.log("修改结果")
            API.put("/api/user/updateByStudentId", this.entity).then(res => {
                if (res.data.code === 200) {
                    this.$message.success("修改成功!");
                    console.log("成功")
                    this.user = JSON.parse(sessionStorage.getItem('user'));
               this.getByStudentId();
                }else{
                    this.$message.error("修改失败！");
                }
            }).catch(error=>{
               console.log(error)
               this.user = JSON.parse(sessionStorage.getItem('user'));
               this.getByStudentId();
            })
            //修改之后更新本地的数据
            this.getByStudentId();
            this.user = JSON.parse(sessionStorage.getItem('user'));
            this.dialogFormVisible = false
            this.reload();
        },
        handleChange(value) {
            console.log(value);
        },
        handleClick(tab, event) {
            console.log(tab);
            if (tab.paneName == "shfx") {
                console.log("生活分享");
                this.getlifesharings();
            } else {
                console.log("学习交流");
                this.getlearningexchanges();
            }

        },
        getlifesharings() {
            API.get("api/lifeSharing/list", {
                params: {
                    "studentid": this.user.studentId
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.lifesharings = res.data.data;
                    console.log(res)
                    console.log(this.learningexchanges)

                }
            })
        },
        getlearningexchanges() {
            API.get("api/learningExchange/list", {
                params: {
                    "studentid": this.user.studentId
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.learningexchanges = res.data.data;
                    console.log(res)
                    console.log(this.learningexchanges)

                }
            })
        },
        toDetail(id, type, stuId) {
            this.$router.push({ path: '/detail', query: { id: id, type: type, stuId: stuId } })
        },
        // 关注
        star() {
            API.post("/api/Star/star", {
                "userId": this.userbase.studentId,
                "starUserId": this.userid,
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success("关注成功!")
                    this.reload();
                } else {
                    this.$message.error("关注失败!")
                }
            })
        },
        //取消关注
        nostar() {
            API.delete("/api/Star/del", {
                params: {
                    "userId": this.userbase.studentId,
                    "starUserId": this.userid,
                }
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.data) {
                        this.isuserstar = false
                        this.$message.warning("取消关注!");
                        this.reload();
                    }
                } else {
                    console.log(res)
                }
            })
        },
        //查询是否关注
        isstar() {
            API.get("/api/Star/isStart", {
                params: {
                    "userId": this.userbase.studentId,
                    "starUserId": this.userid,
                }
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.data) {
                        this.isuserstar = true
                    }
                } else {
                    console.log(res)
                }
            })
        },
        istbshow() {
            //如果是自己的帖子则不显示关注图标
            if (!this.userid || this.userid == this.user.studentId) {
                console.log("对比结果为:1")
                this.tbxs = false;
            } else {
                this.tbxs = true;
            }
        },
        //判断是否为当前用户
        islguser() {
            console.log("对比结果" + this.userid == this.user.studentId)
            if (this.userid == this.user.studentId || this.userid == null) {
                console.log("自己")
                this.isloginuser = true;
                this.getByStudentId();
                this.imageUrl = this.user.headSculpture
            } else {
                console.log("其他")
                API.get("/api/user/getByStudentId", {
                    params: {
                        "studentId": this.userid
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        this.user = res.data.data;
                        console.log("获取的用户")
                        console.log(this.user)
                        this.imageUrl = this.user.headSculpture
                    }
                })
            }
        },
        exit() {
            this.dialogFormVisible = false;
            this.entity = {}
        }


    },
    created() {
        this.userid = this.$route.query.userid;
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
        this.userbase = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
        this.islguser();
        this.isstar()
        this.istbshow();
    },
};
</script>

<style scoped>
.userinfo>div>span {
    margin-left: 12px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

>>>.el-icon-star-on {}
</style>